<template>
	<view class="header flex-between" :style="{paddingTop:statusHeight}">
		<navigator url="/pages/index/searchGoods" class="input flex-center" hover-class="none">搜索菜品名称</navigator>
		<navigator url="/pages/user/message" hover-class="none" class="right">
			<view class="iconfont iconxiaoxi"></view>
			<view class="dot"></view>
		</navigator>
	</view>
</template>

<script>
	export default {
		props:['statusHeight'],
		data() {
			return {
				
			};
		},
		methods:{
			
		}
	}
</script>

<style lang="less">
	.header{
		position: sticky;
		top:0;
		z-index: 1;
		width: calc(100vw - 40rpx);
		padding: 0 20rpx;
		font-size: 30rpx;
		color:white;
		height: 44px;
		background: white;
		.input{
			width: 600rpx;
			height: 60rpx;
			border-radius: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color:#999;
			background: #eee;
		}
		.right{
			position: relative;
			.dot{
				position: absolute;
				right:0;
				top:0;
				width: 20rpx;
				height:20rpx;
				border-radius: 50%;
				background: red;
			}
		}
		.iconxiaoxi{
			font-size: 50rpx;
			color:#222;
		}
	}
</style>
